

<div class="panel">
    <div class="restaurantInfo">
        <ul class="infos" style="font-size: 4vw">

            <li class="row">
                <div id="rl" class="col-sm-4" style="float:left">
                    <span id="sp"></span>
                </div>
                <div style="width: 60%; float: right;text-align: right" id="mm">
                    <script type="text/x-dot-template" id="goods">
                        订餐时间: <span>{{=it.s1}}</span>至<span>{{=it.s2}}</span>
                    </script>
                </div>
            </li>
        </ul>
    </div>
    <div>
        <div class="good-list" id="orderDetail">
            <script type="text/x-dot-template" id="goodsList">
                <div id="left">
                    <div id="left_content">
                        {{~it.mylist :values:index}}
                        <div class="tt tt_unclick" id="tt{{=values.types}}">{{=values.ss}}</div>
                        {{~}}
                    </div>

                </div>

                <div id="right">
                    <div id="right_content">
                        {{~it.mylist :values:index}}
                        <div class="contentMK" id="content{{=values.types}}">
                            {{~values.menu:value:i}}
                            {{? value.isUping==1}}
                            <li class="content">
                                <img src="/upload/{{=value.imageFile}}"
                                     style="/*background: url('/statics/imgs/img_background.png') no-repeat  center 50%;background-size: 80% */">

                                <p class="g-title">({{=value.itemType}}){{=value.itemName}}&nbsp;&nbsp;&nbsp;<span>剩余({{=value.storeNum}})</span></p>
                                <p class="g-desc">{{=value.itemDescription}}</p>
                                <p class="g-price" style="margin-top: 42px">￥{{=value.itemPrice}}/{{=value.itemUnit}}</p>
                                <div class="num">
                                    <div class="quantity-form" gid="{{=value.menuId}}">
                                        <a class="decrement" href="javascript:void(0);" style="display: none"
                                           id="decrement_{{=value.menuId}}" gid="-"><img
                                                src="/statics/imgs/reduce.png?v=${params.ver}"></a>
                                        <a class="increment" name="incrementBtn" href="javascript:void(0);" gid="+" id="increment_{{=value.menuId}}">
                                            <img src="/statics/imgs/add.png?v=${params.ver}" id="add_img_{{=value.menuId}}"></a>
                                        <img src="/statics/imgs/goodsNumBg.png?v=${params.ver}" class="itxtImg"
                                             id="itxtImg_{{=value.menuId}}">
                                        <input type="text" value="0" class="itxt" name="{{=value.itemPrice}}"
                                               autocomplete="off" id="val_{{=value.menuId}}" data-isCartGoods="0" data-menuName="{{=value.itemName}}" style="display: none"
                                               readonly="readonly">
                                    </div>
                                </div>
                            </li>
                            {{?}}
                            {{~}}
                        </div>
                        {{~}}
                        <div id="loading">无更多商品</div>
                    </div>
                </div>
                </div>
            </script>
            </div>
        </div>
</div>

<div class="ypfood-head">
    <div class="back-div" onClick="javascript :history.back(-1);">
        <img src="/statics/imgs/head-back.png?v=${params.ver}">
    </div>
    <div style="text-align: right;padding-right:3vw;">
        <span class="title-span" style="padding-right:12vw">A栋B1餐厅</span>
        <a href="tel:010-66579932">
             <button class="btn">联系餐厅</button>
        </a>
    </div>
</div>
<div id="cartListPanel" class="pop-panel">
    <%--<div plugin="dot" id="cartListPanel" class="pop-panel" onclick="hideChangeZqPanel()">--%>
    <div class="pop-panel-shadow" style="filter:alpha(opacity:30);opacity:0.3;" onclick="hideCartPanel()"></div>
    <div id="cartListPanelContent" class="payway-panel pop-panel-content" style="display: none">
        <div class="cart-header">
            <div style=" width: 100%; float: left; ">购物车</div>
            <%--<div style="width: 47%; float: right; text-align: right;" onclick="clearCart()">清空</div>--%>
        </div>
        <div class="goods-list">
            <ul id="cart-goods-list-ul">
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    <div class="cart" onclick="openCart()">
        <p id="cartGoodsNum" style="display: none;">0</p>
    </div>
    <div class="monye">￥<span id="amount">0</span></div>
    <div class="subOrder disabled" onclick="subOrder()">
        <span class="title-span ">预定</span>
    </div>
</div>
<script type="text/javascript" src="/statics/js/jquery.2.x.js"></script>

<script type="text/javascript" src="/statics/js/xback.js"></script>

<script>
    var isPopCartPanel = false;
    function openCart() {
        if ($(".subOrder").hasClass("disabled")) {
            return;
        }
        if (isPopCartPanel) {
            hideCartPanel();
        } else {
            popCartPanel();
        }
    }
    function popCartPanel() {
        $("#cartListPanel").css("display", "block");
        $("#cartListPanelContent").slideToggle('100', function () {
            //if(document.getElementById("cartListPanelContent").offsetHeight == document.getElementById("cartListPanelContent").scrollHeight){
            //}
        });
        $("#cartListPanelContent").css("display", $("#cartListPanel").css("display"));
        isPopCartPanel = true;
        $("body").css("overflow", "hidden");
    }
    function hideCartPanel() {
        isPopCartPanel = false;
        $("#cartListPanelContent").slideToggle('100', function () {
            $("#cartListPanel").css("display", "none");
            $("#cartListPanelContent").css("display", $("#cartListPanel").css("display"));
            $("body").css("overflow", "visible");
        });
    }
    function subOrder() {
        if ($(".subOrder").hasClass("disabled")) {
            return;
        }
        var goods = $("input[type='text'][data-isCartGoods='1']");
        var select = "";
        for (var i = 0; i < goods.length; i++) {
            select += $(goods[i]).parent().attr("gid") + "@@" + $(goods[i]).val() + ",";
        }
        json("/order/addToCart.jspa", {select: select}, function (data) {
            if (data.code == 0) {
                window.location.href = "/order/orderInfo.jspa";
            }else{
                layer.open({content:data.description,time:3});
            }
        });
    }

    var _data = new Array();
    var page = 0;
    var pageNum = 15;

    function setCartGoodsNum(num) {
        if (num != 0) {
            $("#cartGoodsNum").css("display", "block");
            $("#cartGoodsNum").html(num);
        }
        else {
            $("#cartGoodsNum").css("display", "none");
            $("#cartGoodsNum").html(num);
        }
    }
    function resetAmount() {
        var goods = $("input[type='text'][data-isCartGoods='1']");
        var money = 0;
        for (var i = 0; i < goods.length; i++) {
            var m = parseFloat($(goods[i]).attr("name"));
            money += parseInt($(goods[i]).val()) * m;
        }
        $("#amount").html(money.toFixed(2));
        if (money > 0) {
            $(".subOrder").removeClass("disabled");
        } else {
            if (!$(".subOrder").hasClass("disabled")) {
                $(".subOrder").addClass("disabled");
            }
        }
    }


    var goodsListTemp = $("#goodsList").html();
    function initdata() {
        json("/menu/menus.jspx", {}, function (data) {
            $("#sp").html(data.times);
            $("#orderDetail").html(doT.template(goodsListTemp)(data));

            /*******************左右菜单栏联动效*************************/
                $(function () {
                    $(".tt").eq(0).attr("class","tt tt_click");
                    var list_w=$(window).height()-170;
                    $("#right").height(list_w);
                    $("#left").height(list_w);

                    //左侧按钮状态的变化,点击或者拖动到相应状态，按钮状态变化控制$ID:按钮ID
                    function showBtn(ID){
                        //先全部恢复到未选中状态
                        $(".tt").attr("class","tt tt_unclick");
                        $("#tt"+ID.toString()).attr("class","tt tt_click");

                    }



                    //左边点击菜单右侧栏滚动事件

                    var clickLeft = false;

                    //左边点击菜单右侧栏滚动事件

                    $("#left_content").on('click','.tt',function(e){
                        clickLeft = true;
                        // var id=e.currentTarget.id.slice(2);
                        var id = $(this)[0].id.slice(2);
                        var scroll_h=$("#content"+(id)).position().top;
                        var a=document.getElementById("#content"+(id));
                        $("#right").animate({
                            scrollTop: scroll_h+'px'
                        }, 500,function(){
                            clickLeft = false;
                        });
                        showBtn(id);
                    })

                    $("#right").on("scroll", bScrollEvent);
                    function bScrollEvent(){
//当滚动条滚动时
                        if(clickLeft){
                            return false;
                        }
                        var list=$(".contentMK");
                        for(var i=0;i<list.length;i++){
                            var scroll_H=$("#right").scrollTop();
                            var own_Top=$(list[i]).position().top;
                            var bb=$(list[i]).height();
                            var id=list[i].id.slice(7);
                            if(scroll_H>=own_Top&&scroll_H<=(own_Top+bb)){
                                showBtn(id);
                            }
                        }
                    }
                })

            /*绑定查看商品详情页面*/
            /*$("#orderDetail li >img ,#orderDetail li > p").bind("click", function (obj) {
             var goodsId = parseInt($(this).parent().attr("id").substr(3));
             if (token != "") {
             doAdds("/product/productInfo.jspx?goodsId=" + goodsId + "&cat=" + cat, true);
             } else {
             window.location.href = "/product/productInfo.jspx?goodsId=" + goodsId + "&cat=" + cat;
             }
             });*/
            /*绑定数量加减*/
            $(".quantity-form a").bind("click", function () {
                var $p = $("input", $(this).parent());
                var v = parseInt($p.val());
                var gid = $(this).parent().attr("gid");
                if ($(this).attr("gid") == '-') {
                    v -= 1;
                    if (v == 0) {
                        removeChildLi(gid);
                        $("#val_" + gid).css('display', 'none');
                        $("#decrement_" + gid).css('display', 'none');
                        $("#itxtImg_" + gid).css('display', 'none');
                        $("#add_img_" + gid).attr('src', "/statics/imgs/add.png?v=${params.ver}");
                    }
                    setCartGoodsNum(parseInt($("#cartGoodsNum").html()) - 1);
                } else {
                    var s = v;
                    v += 1;
                    $p.attr("data-isCartGoods", '1')
                    if (v == 1) {
                        appendChildLi(gid, $p.attr("name"),$p.attr("data-menuName"));
                        $("#decrement_" + gid).css('display', 'block');
                        $("#itxtImg_" + gid).css('display', 'block');
                        $("#val_" + gid).css('display', 'block');
                        $("#add_img_" + gid).attr('src', "/statics/imgs/add_new.png?v=${params.ver}");
                    }
                    if (v > s) {
                        setCartGoodsNum(parseInt($("#cartGoodsNum").html()) + 1);
                    }
                }
                $(".val_"+gid).val(v).attr("value", v);
                $p.val(v);
                $p.attr("value", v);
                resetAmount();
            });
            var goodTemp = $("#goods").html();
            json("/menu/menusTime.jspx", {}, function (data) {
                if (data.code == 0) {
                    $("#mm").html(doT.template(goodTemp)(data));
                }
            });
            json("/order/cartInfo.jspa", {}, function (data) {
                if (data.code == 0) {
                    var goods = data.menus;
                    for (var i = 0; i < goods.length; i++) {
                        $("#val_" + goods[i].menuId).val(goods[i].num).attr("value", goods[i].num);
                        $("#val_" + goods[i].menuId).attr("data-isCartGoods", '1');
                        if ($("#val_" + goods[i].menuId).is(":visible") == false) {
                            $("#decrement_" + goods[i].menuId).css('display', 'block');
                            $("#itxtImg_" + goods[i].menuId).css('display', 'block');
                            $("#val_" + goods[i].menuId).css('display', 'block');
                            $("#add_img_" + goods[i].menuId).attr('src', "/statics/imgs/add_new.png");
                        }
                    }
                }
                resetAmount();
            });
        });
    }
    function clearCart(){

    }
    function removeChildLi(menuId){
        $(".li_"+menuId).remove();
    }
    function appendChildLi(menuId, itemPrice, menuName) {
        $("#cart-goods-list-ul").append(
                '<li class="li_' + menuId + '">' +
                '<div class="g-tit">' + menuName + '</div>' +
                '<div class="g-pri">￥' + itemPrice + '</div>' +
                '<div class="g-num">' +
                '<div class="quantity-form" gid="' + menuId + '">' +
                '<a class="decrement decrement_' + menuId + '" href="javascript:void(0);" gid="-" onclick="delNum(\''+menuId+'\')">' +
                '<img src="/statics/imgs/reduce.png?v=${params.ver}">' +
                '</a>' +
                '<a class="increment" name="incrementBtn" href="javascript:void(0);" gid="+" onclick="addNum(\''+menuId+'\')">' +
                '<img src="/statics/imgs/add_new.png?v=${params.ver}" class="add_img_' + menuId + '">' +
                '</a>' +
                '<img src="/statics/imgs/goodsNumBg.png?v=${params.ver}" class="itxtImg itxtImg_' + menuId + '" style="display: block;">' +
                '<input type="text" value="0" class="itxt val_' + menuId + '" name="'+itemPrice+'" autocomplete="off" data-isCartGoods="0" style="" readonly="readonly">' +
                '        </div>' +
                '</div></li>');
    }
    function addNum(gid){
        $("#increment_"+gid).click();
    }
    function delNum(gid){
        $("#decrement_"+gid).click();
    }
    /*var stop = true;
     $(window).scroll(function () {
     var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
     if ($(document).height() <= (totalheight + 110)) {
     if (stop == true) {
     stop = false;
     initdata();
     }
     }
     });*/



    initdata();
    XBack.listen(function () {
    });
</script>
<script type="text/javascript" src="/statics/js/jquery-1.11.3.min.js"></script>
<script src="/statics/js/jquery.touchSwipe.min.js"></script>

<script>

</script>